<template>
  <view class="container">
    <!--logo-->

    <view
        style="width: 100px;border-radius: 50%;display: flex;justify-content: center;align-items: center">
      <view style="margin-top: 50px">
        <IconFont
            size="60"
            name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/icons/180x180.png"
        ></IconFont>
        <view style="font-size: 18px;font-weight: bolder;text-align: center;margin-top: 10px">拓物链</view>
      </view>

    </view>
    <!--一键登录-->
    <nut-button color="#07c160" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
                style="font-size: 15px;width: 200px;margin-top: 60px">
      <!--      <template #icon>
              <IconFont
                  size="18"
                  name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E5%BE%AE%E4%BF%A1.png"
              ></IconFont>
            </template>-->
      手机号快捷登录
    </nut-button>
    <!--协议-->
    <nut-checkbox icon-size="14" v-model="agree" style="margin-top: 40rpx" @change="changeAgree">
      <nut-space style="font-size: 12px;" gutter="0">
        <span style="color: grey">登录即视为已阅读并同意</span><span style="color: red"
                                                                     @click="Taro.navigateTo({url:'/pages/view/webView/index'})">《拓物链隐私协议》</span>
      </nut-space>
    </nut-checkbox>

    <nut-dialog title="用户隐私协议" v-model:visible="agreeVisible" @cancel="noAgree" @ok="agree=true"
                ok-text="同意" cancel-text="不同意">
      <span style="font-size: 12px;color: black">在您使用拓物链服务前，请仔细阅读<span style="color: red;display: inline"
                                                                                      @click="Taro.navigateTo({url:'/pages/view/webView/index'})">《拓物链隐私协议》</span>，在您使用相应功能时，我们会根据服务内容获取必要的个人信息，如您同意该指引，请点击“同意”开始使用拓物链小程序。</span>
    </nut-dialog>


  </view>
</template>

<script>
import {ref} from 'vue';
import Taro from "@tarojs/taro";
import {IconFont, StarFill} from "@nutui/icons-vue";
import {getLoginUser, mpDoLoginByPhone} from "../../../api/login";

import {emptyUrl} from "../../../utils/imgUtils";

const agreeVisible = ref(true);
const agree = ref(false);
const onGetPhoneNumber = (e) => {

  if (!agree.value) {
    agreeVisible.value = true;
    return
  }


  const {encryptedData, iv, errMsg} = e.detail
  console.log("e.detail", e.detail)
  Taro.login().then(loginRes => {
    if (loginRes.code) {
      console.log(loginRes)
      if (errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
        Taro.showToast({
          title: '已取消手机号快捷登录',
          icon: 'none'
        });
      } else { //允许授权
        mpDoLoginByPhone({
          code: loginRes.code,
          iv: iv,
          data: encryptedData
        }).then(res => {
          if (200 === res.code) {
            Taro.setStorageSync('token', res.data);
            getLoginUser().then(res => {
              if (res.code == 200) {
                Taro.setStorageSync('userInfo', JSON.stringify(res.data));
                /* const lastPageUrl = getLastPageUrl();
                 console.log("lastPageUrl",lastPageUrl)
                 Taro.redirectTo({url: `/${lastPageUrl}`})*/
                Taro.switchTab({url: '/pages/tabBar/index/index'});
                // Taro.navigateBack({delta: 1})

              }
            })
          }
        }).finally(()=>{
          Taro.hideLoading();
        })
      }
    }
  })


}


const changeAgree = (e) => {
  if (!e) {
    agreeVisible.value = true;
  }
}

const noAgree = (e) => {
  agree.value = false;
  console.log("noAgree", e)
  Taro.navigateBack()

}


export default {
  methods: {
    emptyUrl() {
      return emptyUrl
    }
  },
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad() {
  },

  onReady() {
  },

  onShow() {
    agreeVisible.value = true;
  },

  onHide() {
  },

  onPullDownRefresh() {
    console.log("onPullDownRefresh")

  },
  onReachBottom() {
    console.log("onReachBottom")

  },


  setup() {


    return {


      onGetPhoneNumber,
      Taro,
      changeAgree,
      noAgree,
      agreeVisible,
      agree,


    }
  }

}


</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  height: 100vh;

}

.login-btn {

}
</style>